<template>
  <div id="login">
    <div id="bgd">
      <canvas
        id='myCanvas'
        :width='width'
        :height='height'
      >
      <!-- 测试git 从你急哇-->
      </canvas>
    </div>
		  <div class="ms-login" style="width:25%;">
		      <div class="ms-title">会议室预定系统</div>
		      <!-- 登录表单区域 -->
		      <el-form ref="loginFormRef"  class="ms-content" :rules="loginFormRules" :model="loginForm" label-width="0px"  >
		          <!-- 用户名 -->
		          <el-form-item prop="username">
		              <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user" placeholder="请输入登录名称" style="width:70%;height:40px;"></el-input>
		          </el-form-item>
		          <!-- 密码 -->
		          <el-form-item prop="password">
		              <el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" type="password" placeholder="请输入登录密码"  style="width:70%;"></el-input>
		          </el-form-item>
		          <!-- 登录按钮 -->
		          <el-form-item class="btns" >
		              <el-button type="primary" @click="login" style="margin-left:150px;">登录</el-button>
		              <el-button type="info" @click="resetLoginForm">重置</el-button>
		          </el-form-item>
		      </el-form>
		  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      canvas: null,
      context: null,
      stars: [], //星星数组
      shadowColorList: [
        "#39f",
        "#ec5707",
        "#b031d4",
        "#22e6c7",
        "#92d819",
        "#14d7f1",
        "#e23c66"
      ], //阴影颜色列表
      directionList: ["leftTop", "leftBottom", "rightTop", "rightBottom"], //星星运行方向
      speed: 50, //星星运行速度
      last_star_created_time: new Date(), //上次重绘星星时间
      Ball: class Ball {
        constructor(radius) {
          this.x = 0;
          this.y = 0;
          this.radius = radius;
          this.color = "";
          this.shadowColor = "";
          this.direction = "";
        }

        draw(context) {
          context.save();
          context.translate(this.x, this.y);
          context.lineWidth = this.lineWidth;
          var my_gradient = context.createLinearGradient(0, 0, 0, 8);
          my_gradient.addColorStop(0, this.color);
          my_gradient.addColorStop(1, this.shadowColor);
          context.fillStyle = my_gradient;
          context.beginPath();
          context.arc(0, 0, this.radius, 0, Math.PI * 2, true);
          context.closePath();

          context.shadowColor = this.shadowColor;
          context.shadowOffsetX = 0;
          context.shadowOffsetY = 0;
          context.shadowBlur = 10;

          context.fill();
          context.restore();
        }
      }, //工厂模式定义Ball类
      width: window.innerWidth,
      height: window.innerHeight,
// 登陆表单的数据绑定对象
            loginForm: {
                username: '111',
                password: '123456'
            },
            // 这是表单的验证规则对象
            loginFormRules: {
                // 验证用户名是否合法
                username: [
                    { required: true, message: '请输入登录名称', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                // 验证密码是否合法
                password: [
                    { required: true, message: '请输入登录密码', trigger: 'blur' },
                    { min: 5, max: 10, message: '密码长度在 5 到 10 个字符', trigger: 'blur' }
                ]
            }
    };
  },
  methods: {
    // 点击重置按钮，重置登录表单
    resetLoginForm () {
        this.$refs.loginFormRef.resetFields()
    },
    login () {
        this.$refs.loginFormRef.validate(async valid => {
            if (!valid) return
            const { data: res } = await this.$http.post('/login', this.loginForm)
            if (res.code !== 100) return this.$message.error('登陆失败，用户名或者密码错误！')
            this.$message.success('登陆成功')
            // 1.将登陆成功之后的token，保存到客户端中的sessionStorage中
            //   1.1 项目中除了登录之外的其他API接口，必须在登录之后才能访问
            //   1.2 token只在当前网站打开期间生效，所以将token保存在sessionStorage中
            window.sessionStorage.setItem('token', res.extend.token)
            localStorage.setItem('userInfo',JSON.stringify(res.extend.staff));
						
            // 2.通过编程式导航跳转到后台主页，路由地址是/home
            
            this.$router.push('/home')
            
            
        })
    },
     
    //重复动画
    drawFrame() {
      let animation = requestAnimationFrame(this.drawFrame);
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.createStar(false);
      this.stars.forEach(this.moveStar);
    },
    //展示所有的星星
    createStar(params) {
      let now = new Date();
      if (params) {
        //初始化星星
        for (var i = 0; i < 50; i++) {
          const radius = Math.random() * 3 + 2;
          let star = new this.Ball(radius);
          star.x = Math.random() * this.canvas.width + 1;
          star.y = Math.random() * this.canvas.height + 1;
          star.color = "#ffffff";
          star.shadowColor = this.shadowColorList[
            Math.floor(Math.random() * this.shadowColorList.length)
          ];
          star.direction = this.directionList[
            Math.floor(Math.random() * this.directionList.length)
          ];
          this.stars.push(star);
        }
      } else if (!params && now - this.last_star_created_time > 3000) {
        //每隔3秒重绘修改颜色其中30个球阴影颜色
        for (var i = 0; i < 30; i++) {
          this.stars[i].shadowColor = this.shadowColorList[
            Math.floor(Math.random() * this.shadowColorList.length)
          ];
        }
        this.last_star_created_time = now;
      }
    },
    //移动
    moveStar(star, index) {
      if (star.y - this.canvas.height > 0) {
        //触底
        if (Math.floor(Math.random() * 2) === 1) {
          star.direction = "leftTop";
        } else {
          star.direction = "rightTop";
        }
      } else if (star.y < 2) {
        //触顶
        if (Math.floor(Math.random() * 2) === 1) {
          star.direction = "rightBottom";
        } else {
          star.direction = "leftBottom";
        }
      } else if (star.x < 2) {
        //左边
        if (Math.floor(Math.random() * 2) === 1) {
          star.direction = "rightTop";
        } else {
          star.direction = "rightBottom";
        }
      } else if (star.x - this.canvas.width > 0) {
        //右边
        if (Math.floor(Math.random() * 2) === 1) {
          star.direction = "leftBottom";
        } else {
          star.direction = "leftTop";
        }
      }
      if (star.direction === "leftTop") {
        star.y -= star.radius / this.speed;
        star.x -= star.radius / this.speed;
      } else if (star.direction === "rightBottom") {
        star.y += star.radius / this.speed;
        star.x += star.radius / this.speed;
      } else if (star.direction === "leftBottom") {
        star.y += star.radius / this.speed;
        star.x -= star.radius / this.speed;
      } else if (star.direction === "rightTop") {
        star.y -= star.radius / this.speed;
        star.x += star.radius / this.speed;
      }
      star.draw(this.context);
    }
  },
  mounted() {
    this.canvas = document.getElementById("myCanvas");
    this.context = this.canvas.getContext("2d");

    this.createStar(true);
    this.drawFrame();
  }
};
</script>

<style lang='less' scoped>
#login {
  width: 100vw;
  padding: 0;
  margin: 0;
  height: 100vh;
  font-size: 16px;
  background-repeat: no-repeat;
  background-position: left top;
  background-color: #242645;
  color: #fff;
  font-family: "Source Sans Pro";
  background-size: 100%;
  background-image: url("../assets/bg-test3.jpg");
  position: relative;
  #bgd {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
  }
  #loginBox {
    width: 240px;
    height: 280px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding: 50px 40px 40px 40px;
    box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
    opacity: 1;
    background: linear-gradient(
      230deg,
      rgba(53, 57, 74, 0) 0%,
      rgb(0, 0, 0) 100%
    );
    /deep/ .inps input {
      border: none;
      color: #fff;
      background-color: transparent;
      font-size: 12px;
    }
    .submitBtn {
      background-color: transparent;
      color: #39f;
      width: 200px;
    }
    .iconfont {
      color: #fff;
    }
  }
}
  .ms-title {
      margin-top: 15px;
      width: 100%;
      line-height: 50px;
      text-align: center;
      font-family: "Source Sans Pro", sans-serif;
      font-size: 28px;
      color: rgb(57, 64, 68);
      border-bottom: 1px solid #ddd;
  }
  .ms-login {
      position: absolute;
      left: 45%;
      top: 50%;
      width: 350px;
      margin: -190px 0 0 -175px;
      border-radius: 5px;
      background: rgba(255, 255, 255, 0.3);
      overflow: hidden;
  }
  .ms-content {
      padding: 30px 30px;
  }

  .beian{
	  position: absolute;
	  top: 80%;
	  left: 45%;
   	  bottom: 0;
   	  text-align: center;
  }
  .btns{
      display: flex;
      // justify-content: flex-end;
  }
</style>





